<template>
  <div
    class="demo-block demo-zh-CN demo-table"
    style="background-color: #FFFFFF;"
  >
    <template>
      <div class="header" v-if="table.header.show">
        <el-card class="box-card">
          <RHButton
            :btn="refreshBtn"
            style="margin:5px;"
            v-if="table.refreshBtn"
          ></RHButton>
          <template v-for="(btn, index) in table.header.btn">
            <RHButton
              :btn="btn"
              :key="index.toString() + 1"
              style="margin:5px;"
            ></RHButton>
          </template>
        </el-card>
      </div>
    </template>
    <div class="table">
      <div class="hidenBtn">
        <el-popover placement="bottom-start" trigger="click" width="200">
          <template>
            <el-checkbox
              :indeterminate="hideCheckbox.isIndeterminate"
              @change="handleCheckAllChange"
              v-model="hideCheckbox.checkAll"
              >全选
            </el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group
              @change="handleCheckedCitiesChange"
              v-model="hideCheckbox.checkedCities"
            >
              <el-checkbox
                :checked="!item.hide"
                :key="index.toString()"
                :label="index.toString()"
                style="display: block;"
                v-for="(item, index) in hideColumn"
                >{{ item.title }}
              </el-checkbox>
            </el-checkbox-group>
          </template>
          <RHButton
            :btn="hideBtn"
            slot="reference"
            v-show="hideBtn.show"
          ></RHButton>
        </el-popover>
      </div>
      <template v-if="table.data">
        <el-table
          :border="table.border"
          :data="table.data"
          :stripe="table.stripe"
          class="500px;"
          style="width: 100%"
          v-loading="table.loading"
        >
          <!--隐藏列-->
          <template v-if="table.hideColumn && hideColumn.length > 0">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form class="demo-table-expand" inline label-position="left">
                  <template v-for="(item, index) in hideColumn">
                    <template v-if="item.hide">
                      <el-form-item
                        :key="index.toString() + 1"
                        :label="item.title"
                        v-if="item.fieId !== ''"
                      >
                        <span>{{ props.row[item.fieId] }}</span>
                      </el-form-item>

                      <el-form-item
                        :key="index.toString() + 1"
                        :label="item.title"
                        v-else
                      >
                        <span>{{ item.formatter(props.row) }}</span>
                      </el-form-item>
                    </template>
                  </template>
                </el-form>
              </template>
            </el-table-column>
          </template>

          <!--行数据-->
          <template v-for="(item, index) in table.columns">
            <el-table-column
              :key="index.toString() + 1"
              :label="item.title"
              :prop="item.fieId"
              :width="item.width"
              v-if="
                item.fieId !== '' && item.hide === false && item.type === 'text'
              "
            >
            </el-table-column>

            <el-table-column
              :key="index.toString() + 1"
              :label="item.title"
              :width="item.width"
              v-else-if="
                item.fieId !== '' &&
                  item.hide === false &&
                  item.type === 'progress'
              "
            >
              <template slot-scope="scope">
                <el-progress
                  :percentage="scope.row[item.fieId]"
                  :stroke-width="item.progress.width"
                  :text-inside="item.progress.textInside"
                  status="success"
                  v-if="scope.row[item.progress.status] === 1"
                ></el-progress>
                <el-progress
                  :percentage="scope.row[item.fieId]"
                  :stroke-width="item.progress.width"
                  :text-inside="item.progress.textInside"
                  status="exception"
                  v-else-if="scope.row[item.progress.status] === 2"
                ></el-progress>
                <el-progress
                  :percentage="scope.row[item.fieId]"
                  :stroke-width="item.progress.width"
                  :text-inside="item.progress.textInside"
                  v-else
                ></el-progress>
              </template>
            </el-table-column>

            <el-table-column
              :formatter="item.formatter"
              :key="index.toString() + 1"
              :label="item.title"
              :width="item.width"
              v-else-if="item.hide === false"
            >
            </el-table-column>
          </template>
          <!--操作列-->
          <el-table-column label="操作" v-if="table.columnsBtn.length > 0">
            <template slot-scope="scope">
              <template v-for="(btn, index) in table.columnsBtn">
                <RHButton
                  :btn="btn"
                  :clickType="1"
                  :key="index.toString() + 1"
                  :param="scope.row"
                ></RHButton>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <template
          v-if="
            table.paging && table.pagingParam.total > table.pagingParam.pageSize
          "
        >
          <el-pagination
            :current-page="table.pagingParam.page"
            :layout="table.pagingParam.layout"
            :page-size="table.pagingParam.pageSize"
            :page-sizes="table.pagingParam.pageSizes"
            :total="table.pagingParam.total"
            @current-change="currentChange"
            @next-click="nextClick"
            @prev-click="prevClick"
            @size-change="sizeChange"
          >
          </el-pagination>
        </template>
      </template>
      <template v-else>
        无数据
      </template>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import RHButton from "@/common/button/index";
import * as request from "@/axios/axios";
import * as table from "@/common/RHTable/table";

export default {
  name: "RHTable_index",
  data() {
    return {
      column: {
        //列属性
        fieId: "",
        title: "",
        type: "text",
        width: "",
        highlight: false,
        formatter: null,
        valuesParams: {
          type: true, // 默认值 是的使用 默认使用 是否使用默认true
          url: "", // 配置url 读取url 数据 默认键值对类型，数组格式徐指定key label
          params: {}, // 请求参数
          method: "get",
          key: "",
          label: "",
          values: {} // 例子： 1:'男' value值为1表格展示 男 否者展示value值
        },
        setHide: true, //是否可以设置列隐藏/展示
        hide: false, //是否隐藏
        columns: [],
        progress: {
          //进度调属性
          textInside: true, //将进度条描述置于进度条内部
          width: 24,
          percentage: 0,
          status: "" //1成功 2 失败 0 正常
        }
      },
      hideColumn: [], //隐藏列
      //设置隐藏列按钮
      hideBtn: {
        show: false,
        value: "列（展示/隐藏）"
      },
      //设置隐藏列复选框
      hideCheckbox: {
        checkAll: false,
        checkedCities: [],
        isIndeterminate: true
      },
      table: {
        loading: false,
        url: "",
        method: "post",
        InitializeData: true,
        border: false, //边框
        stripe: true, //斑马线
        refreshBtn: true, //刷新按钮
        header: {
          //表头工具列
          show: false, //是否显示
          btn: [] //按钮参数 button
        },
        params: {}, //参数
        width: "100%", //宽
        columns: [], //列
        columnsBtn: [], //表格操作列
        data: [], //数据
        paging: false, //是否分页
        pagingParam: {
          layout: "total,sizes,prev,pager,next,jumper",
          pageSizes: [10, 50, 100, 150, 200, 500, 800, 1000],
          page: 1, //当前页数
          pageSize: 10, // 每页多少行
          total: 0 //总行数
        },
        hideColumn: false
      },
      tableParam: {},
      //刷新按钮
      refreshBtn: { value: "刷新", click: this.refreshBtnFun }
    };
  },
  props: {
    RHTable: {}
  },
  methods: {
    //刷新按钮
    refreshBtnFun() {
      this.getData(this.tableParam);
    },
    tableLong(RHTable) {
      const header = this.table.header;
      const table = Object.assign(this.table, RHTable);
      table.header = Object.assign(header, table.header);
      this.setColumn(table.columns);
      this.table = table;
      console.log(this.table);
      if (table.url != null && table.url !== "" && table.InitializeData) {
        this.refresh({});
      }
    },
    setColumn(column) {
      if (column != null && column.length > 0) {
        for (let i = 0; i < column.length; i++) {
          const temp = Object.assign({}, this.column);
          // 是否对value 格式化 values
          if (temp.valuesParams.type) {
            //判断是否通过url 加载数据
            if (!_.isEmpty(temp.valuesParams.url)) {
              //查询数据
              table
                .getValue(
                  temp.valuesParams.url,
                  temp.valuesParams.params,
                  temp.valuesParams.method
                )
                .then(response => {
                  let values = response.data;
                  //判断是集合还是对象
                  if (_.isArray(values)) {
                    if (values.length > 0) {
                      //集合
                      if (
                        !_.isEmpty(temp.valuesParams.key) &&
                        !_.isEmpty(temp.valuesParams.label)
                      ) {
                        for (let i = 0; i < values.length; i++) {
                          let v = values[i];
                          temp.valuesParams.values[
                            v[temp.valuesParams.key.key]
                          ] = v[temp.valuesParams.label];
                        }
                      }
                    }
                  } else {
                    //对象
                    temp.valuesParams.values = values;
                  }
                  //手动更新数据
                  this.$forceUpdate();
                });
            }
          }
          if (column[i] && column[i].columns && column[i].columns.length > 0) {
            _.defaultsDeep(column[i], temp);
            this.setColumn(column[i].columns);
          } else {
            _.defaultsDeep(column[i], temp);
          }
        }
      }
    },
    /**
     * 刷新表格数据
     * @param param
     */
    refresh: function(param) {
      this.getData(this.tableParam);
    },
    reset: function(reset) {
      if (this.table.paging) {
        this.table.pagingParam.page = 1;
        if (this.table.pagingParam.pageSizes.length > 0) {
          this.table.pagingParam.pageSize = this.table.pagingParam.pageSizes[0];
        }
      }
      this.getData(reset);
    },
    /**
     * 获取数据
     * @param param
     */
    getData(param) {
      this.table.loading = true;
      param = _.defaultsDeep(param, {});
      if (this.table.paging) {
        if (_.has(param, "pageNum") || _.has(param, "pageSize")) {
          if (_.has(param, "pageNum")) {
            param.pageNum = this.table.pagingParam.page;
          }
          if (_.has(param, "pageSize")) {
            param.pageSize = this.table.pagingParam.pageSize;
          }
        } else {
          const PageInfo = {
            pageNum: this.table.pagingParam.page,
            pageSize: this.table.pagingParam.pageSize,
            params: param
          };
          param = _.defaultsDeep(PageInfo, {});
        }
      }
      request
        .requestAssign(this.table.url, param, this.table.method)
        .then(response => {
          this.tableParam = _.cloneDeep(param);
          this.table.data = response.entity.list;
          this.table.loading = false;
          //是否分页
          if (this.table.paging) {
            this.table.pagingParam.total = response.entity.total;
          }
        });
    },
    /**
     * 初始化表格
     * @param table
     */
    initialize(table) {
      this.tableLong(table);
      this.setHideColumn();
    },
    // 分页
    sizeChange(pageSize) {
      this.table.pagingParam.page = 1;
      this.table.pagingParam.pageSize = pageSize;
      this.getData(this.tableParam);
    },
    prevClick(page) {
      this.table.pagingParam.page = page;
      this.getData(this.tableParam);
    },
    nextClick(page) {
      this.table.pagingParam.page = page;
      this.getData(this.tableParam);
    },
    currentChange(page) {
      this.table.pagingParam.page = page;
      this.getData(this.tableParam);
    },
    /**
     * 设置隐藏列
     */
    setHideColumn() {
      //获取隐藏列
      this.hideColumn = _.filter(this.table.columns, { setHide: true });
    },
    /**
     *  设置隐藏列
     * @param val
     */
    handleCheckAllChange(val) {
      this.hideCheckbox.checkAll = val;
      this.hideCheckbox.isIndeterminate = val;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.hideCheckbox.checkAll = checkedCount === this.hideColumn.length;
      this.hideCheckbox.isIndeterminate =
        checkedCount > 0 && checkedCount < this.hideColumn.length;
    }
  },
  mounted() {
    this.tableLong(this.RHTable);
    this.setHideColumn();
  },
  components: {
    RHButton
  }
};
</script>

<style>
.hidenBtn {
  position: absolute;
  right: 0px;
  margin: 5px;
  z-index: 1;
}

.header {
  background-color: #f2f6fc;
  border-radius: 4px;
  text-align: right;
}

.header .el-card__body {
  padding: 5px;
}

.table {
  background-color: #f2f6fc;
  border-radius: 4px;
  margin-top: 5px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
  display: block;
}
</style>
